<template>
    <div class="Food" v-show="showFlag">
        <transition name="fade">
            <div v-show="showFlag" class="food" ref="food">
                <div class="food-content">
                    <div class="img-header">
                        <img :src="food.image"  alt="">
                        <div class="back" @click="back">
                            <i class="icon-arrow_lift back-icon"></i>
                        </div>
                        
                    </div>
                    <div class="content">
                        <h1 class="title">{{food.name}}</h1>
                        <div class="detail">
                            <span class="sell-count">月售{{food.sellCount}}</span>
                            <span class="rating">好评率{{food.rating}}%</span>
                        </div>
                        <div class="price">
                            <span class="nowPrice">￥{{food.price}}</span>
                            <del class="oldPrice" v-show="food.oldPrice">{{food.oldPrice}}</del>
                        </div>
                        <div class="cartcontrol-wrapper">
                            <cartcontrol :food="food"></cartcontrol>
                        </div>
                        <div @click="addFirst($event)" class="buy" v-show="!food.count || food.count==0">加入购物车</div> 
                    </div>
                    <split v-show="food.info"></split>
                    <div class="info" v-show="food.info">
                        <h1 class="title">商品信息</h1>
                        <p class="text">{{food.info}}</p>
                    </div>
                    <split></split>
                    <div class="rating">
                        <h1 class="title">商品评价</h1>
                        <ratingselect :selectType="selectType" 
                        :onlyContent="onlyContent" :desc="desc" 
                        :ratings="food.ratings"
                        ></ratingselect> 
                        
                        <div class="rating-wrapper">
                            <ul v-show="food.ratings && food.ratings.length">
                                <li v-for="(rating,key) in food.ratings" 
                                :key="key" class="rating-item"
                                v-show="needShow(rating.rateType,rating.text)"
                                >
                                    <div class="user">
                                        <span class="name">{{rating.username}}</span>
                                        <img :src="rating.avatar" width="12" height="12" alt="" class="avatar">
                                    </div>
                                    <div class="time">{{ rating.rateTime | formatDate}}</div>
                                    <p class="text">
                                        <span :class="{'icon-thumb_up':rating.rateType===0,'icon-thumb_down':rating.rateType===1}"></span>{{rating.text}}
                                    </p>
                                </li>
                            </ul>
                            <div class="no-rating" v-show="!food.ratings || !food.ratings.length">暂无评价</div>
                        </div>
                    </div>
                   
                </div>
            </div>
        </transition>
    </div>
</template>
<script>
import Vue from 'vue'
import BScroll from 'better-scroll'
import moment from 'moment'
import cartcontrol from '../cartcontrol/cartcontrol'
import split from '../split/split'
import ratingselect from '../ratingselect/ratingselect'
const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2
export default {
    props:['food'],
    data() {
        return {
            showFlag: false,
            selectType: ALL,
            onlyContent: false,
            desc: {
                all: '全部',
                positive: '推荐',
                negative: '吐槽'
            }
        }
    },
    components : {
        cartcontrol,split,ratingselect
    },
    methods: {
        show(){
            this.showFlag = true
            this.selectType = ALL
            this.onlyContent = true
            this.$nextTick(()=>{
                if(!this.scroll){
                    this.scroll = new BScroll(this.$refs.food,{
                        click: true
                    })
                }else{
                    this.scroll.refresh()
                }
           
            })
        },
        back(){
            this.showFlag = false
        },
        addFirst(event){
            Vue.set(this.food,'count',1)
        },
       /* changeRatingType(type){
            this.$nextTick(()=>{
                //console.log(type)
                this.selectType = type
            })
        },*/
        needShow(type,text){
            if(this.onlyContent&&!text){
                return false
            }
            if(this.selectType===ALL){
                return true
            }else{
                return type===this.selectType;
            }
        }
    },
    filters: {
        formatDate(time,pattern="YYYY-MM-DD HH:mm"){
            return moment(time).format(pattern)
        }
    }
}
</script>
<style>
.fade-enter-active{
    transition: all .5s ease
}
    
.fade-leave-active{
    transition: all .8s cubic-bezier(1.0,0.5,0.8,1.0)
}
    
.fade-enter,.fade-leave-to{
    transform: translateX(400px);
    opacity: 0
}
    
</style>

<style lang="stylus" scoped>
@import '../../common/stylus/base.styl'
@import '../../common/stylus/mixin.styl'
@import '../../common/fonts/icon.css'
.food
    margin 0
    padding 0
    position fixed
    left 0
    top 0
    bottom 48px
    z-index 30
    width 100%
    background #fff
    .food-content
        position relative
        //height 530px
        width 100%
        overflow hidden
        border-bottom 1px solid #ccc
        .img-header
            position relative
            width 100%
            height 0
            padding-top 100%
            img 
                position absolute
                top 0px
                left 0
                width 100%
                height 100%
            .back
                position absolute
                top 10px
                left 10px
                background rgba(7,17,27,0.5)
                width 50px
                height 50px
                border-radius 25px
                .back-icon
                    line-height 50px
                    text-align center
                    display block
                    color rgba(255,255,255,0.5)
                    font-size 20px
        .content
            padding 18px
            position relative
            .title
                font-size 14px
                font-weight 700
                color rgb(7,17,27)
                line-height 14px
                margin-bottom 8px
            .detail
                margin-bottom 18px
                line-height 10px
                font-size 0
                height 10px
                .sell-count,.rating
                    font-size 10px
                    color rgb(147,153,159)
                .sell-count
                    margin-right 12px
            .price
                font-weight 700
                line-height 24px
                .nowPrice
                    margin-right 8px
                    font-size 10px
                    font-weight 700
                    color rgb(240,20,20)
                    line-height 24px
                .oldPrice
                    font-size 10px
                    font-weight 700
                    color rgb(147,153,159)
                    line-height 24px
            .cartcontrol-wrapper
                position absolute
                right 12px
                bottom 12px
            .buy
                position absolute
                right 18px
                bottom 18px
                z-index 10
                height 24px
                line-height 24px
                padding 0 12px
                box-sizing border-box
                font-size 10px
                border-radius 12px
                font-size 10px
                color #fff
                background rgb(0,160,220)
        .info
            padding 18px
            .title
                font-size 14px
                font-weight 700
                color rgb(7,17,27)
                line-height 14px
                margin-bottom 6px
            .text
                padding 0 8px
                font-size 12px
                font-weight 200
                color rgb(77,85,93)
                line-height 24px
        .rating
            padding-top 18px
            .title
                font-size 14px
                font-weight 700
                color rgb(7,17,27)
                line-height 14px
                margin-left 18px
            .rating-wrapper
                padding 0 18px
                .rating-item
                    position relative
                    padding 16px 0
                    border-bottom 1px solid rgba(7,17,27,0.1)
                    .user
                        position absolute
                        top 16px
                        right 0
                        font-size 0
                        line-height 12px
                        .name
                            font-size 10px
                            color rgb(147,153,159)
                            margin-right 6px
                            display inline-block
                            vertical-align top
                        .avatar
                            border-radius 50%
                    .time
                        margin-bottom 6px
                        font-size 10px
                        color rgb(147,153,159)
                        line-height 12px
                    .text
                        font-size 12px
                        color rgb(7,17,27)
                        line-height 16px
                        .icon-thumb_up
                            color rgb(0,160,220)
                            line-height 16px
                            font-size 12px
                            margin-right 4px
                        .icon-thumb_down
                            margin-right 4px
                            color rgb(147,153,159)
                            line-height 16px
                            font-size 12px
                .no-rating
                    padding 16px 0
                    font-size 12px
                    color rgb(147,153,159)
                    



</style>
